<template>
	<div class="card bg-white p-3 mt-3"><!-- 外层 -->	
		<div class="card-header d-flex ai-center pb-3"><!-- 内上层 -->
			<i class="iconfont" :class="`icon-${icon}`"></i>
			<!-- <i class="iconfont icon-caidan1"></i> -->
			<div class="fs-xl flex-1 px-2">{{title}}</div>
			<!-- <div class="fs-xl flex-1 px-2">新闻资讯</div> -->
			<i class="iconfont icon-menu-jf"></i>
		</div>
		<div class="card-body pt-3"><!-- 内下层 -->
			<slot></slot><!-- 插槽 -->
		</div>
	</div>
</template>

<script>
export default {
	props:{
		icon: { type: String, required: true },
		title: { type : String, required: true}
	}
}
</script>

<style lang='scss'>
@import "../assets/scss/_variables.scss";

.card {
	border-bottom: 1px solid $border-color;
	.card-header {
    border-bottom: 1px solid $border-color;
	}
}

</style>